<template>
    <view class="addAddress">
        <view class="card">
            <u-form :model="form" ref="uForm">
                <u-form-item label-width="160" label="收货人">
                    <u-input placeholder="请填写收货人姓名" v-model="form.name" />
                </u-form-item>
                <u-form-item label-width="160" label="手机号码">
                    <u-input placeholder="请填写收货人手机号" v-model="form.mobile" />
                </u-form-item>
                <u-form-item label-width="160" label="所在地区" right-icon="arrow-right">
                    <u-input
                        @click="showpicker"
                        v-model="form.formatted_address"
                        disabled
                        placeholder="请选择所在地区"
                    />
                </u-form-item>
                <u-form-item label-width="160" label="详细地址">
                    <u-input
                        style="
                            width: auto !important;
                            height: 70rpx !important;
                            padding: 20rpx 0 !important;
                        "
                        v-model="form.address"
                        placeholder="街道、门牌号等"
                        placeholder-class="textarea-placeholder"
                    />
                </u-form-item>
                <u-form-item label-width="200" label="设为默认地址">
                    <u-switch
                        inactive-color="#E9E9E9"
                        active-color="#057849"
                        slot="right"
                        v-model="form.default"
                        @change="change"
                    ></u-switch>
                </u-form-item>
            </u-form>
        </view>
        <button class="save" @click="saveForm">保存</button>
        <uni-data-picker
            ref="dataPicker"
            placeholder="请选择所在地区"
            :localdata="dataTree"
            v-model="classes"
            @change="onchange"
        >
        </uni-data-picker>
    </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            form: {
                name: "",
                mobile: "",
                formatted_address: "",
                address_full: "",
                address: "",
                default: false,
                country: "中国",
                province: "",
                city: "",
                district: "",
            },
            BaseUrl: BaseUrl,
            addressList: [],
            dataTree: [],
            classes: [],
            id: null,
        };
    },

    onShow() {
        this.initSsq();
    },
    onLoad(options) {
        if (options.id) {
            this.id = options.id;
        }
        this.initSsq();
        this.getAddressList();
    },

    methods: {
        getDataIt() {
            if (!this.id) return;
            this.addressList.forEach((item) => {
                if (item.id == this.id) {
                    this.form.name = item.name;
                    this.form.formatted_address = item.formatted_address;
                    this.form.province = item.province;
                    this.form.city = item.city;
                    this.form.district = item.district;
                    this.form.address = item.address;
                    this.form.mobile = item.mobile;
                    this.form.default = item.default == "1" ? true : false;
                }
            });
            this.form.id = this.id;
        },
        async getAddressList() {
            await uni.request({
                url: BaseUrl + "/api/wanlshop.address/getaddress",
                method: "GET",
                header: {
                    token: uni.getStorageSync("token"),
                },
                success: (res) => {
                    this.addressList = res.data.data.data;
                    this.getDataIt();
                },
            });
        },
        change(val) {
            this.form.default = val;
        },
        // 省市区
        async initSsq() {
            await uni.request({
                url: BaseUrl + "/api/index/area_list",
                method: "GET",
                header: {
                    token: uni.getStorageSync("token"),
                },
                success: (res) => {
                    res.data.data.forEach((item) => {
                        item.text = item.name;
                        item.value = item.id;
                        if (item.children) {
                            item.children.forEach((item) => {
                                item.text = item.name;
                                item.value = item.id;
                                if (item.children) {
                                    item.children.forEach((item) => {
                                        item.text = item.name;
                                        item.value = item.id;
                                    });
                                }
                            });
                        }
                    });
                    this.dataTree = res.data.data;
                },
            });
        },
        // 确定
        confirmArea(e) {},
        // 选择改变
        onchange(e) {
            this.form.formatted_address =
                e.detail.value[0].text +
                " " +
                e.detail.value[1].text +
                " " +
                e.detail.value[2].text;
            this.form.province = e.detail.value[0].text;
            this.form.city = e.detail.value[1].text;
            this.form.district = e.detail.value[2].text;
        },
        // 选择
        showpicker() {
            this.$refs.dataPicker.show();
        },
        async saveForm() {
            uni.request({
                url: BaseUrl + "/api/wanlshop.address/address",
                method: "POST",
                header: {
                    token: uni.getStorageSync("token"),
                },
                data: {
                    data: this.form,
                    type: this.id ? "edit" : "add",
                },
                success: (res) => {
                    uni.navigateBack();
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.addAddress {
    padding: 30rpx;
    .card {
        padding: 20rpx;
        border-radius: 16rpx;
        background: #fff;
    }
    .save {
        height: 80rpx;
        line-height: 80rpx;
        background: linear-gradient(90deg, #00a67a, #057748);
        position: absolute;
        bottom: 4vh;
        border-radius: 40rpx;
        width: calc(100% - 60rpx);
    }

    /deep/.u-form-left__content__label {
        color: #000 !important;
    }
}
/deep/.input-value-border {
    border: none;
}
/deep/.input-value {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 14px;
    padding: 0 10px;
    padding-right: 5px;
    overflow: hidden;
    height: 0 !important;
    box-sizing: border-box;
}
</style>
